<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
      <style>
        * {
          margin: 0;
          pad: 0;
          box-sizing: border-box;
        }
  
        section {
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 100vh;
          background: #001d10;
          animation: animateBackgroundC0olor 10s linear infinite;
        }
  
        @keyframes animateBackgroundC0olor {
          0% {
            filter: hue-rotate(0deg);
          }
  
          100% {
            filter: hue-rotate(360deg);
          }
        }
  
        .loading {
          position: relative;
          width: 250px;
          height: 250px;
        }
  
        .loading .blocks {
          position: absolute;
          width: 8px;
          height: 25px;
          background-color: #050c09;
          left: 50%;
          border-radius: 8px;
          transform: rotate(calc(18deg * var(--i)));
          transform-origin: 0 125px;
          animation: animate 1.9s ease-in-out infinite;
          animation-delay: calc(0.05s * var(--i));
        }
  
        @keyframes animate {
  
          0%,
          50% {
            background: #050c09;
            box-shadow: none;
          }
  
          50.1%,
          100% {
            background: #0f0;
            box-sizing: 0 0 5px #0f0,
              0 0 15px #0f0,
              0 0 30px #0f0,
              0 0 60px #0f0,
              0 0 90px #0f0;
          }
        }
  
        h3 {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 2em;
          letter-spacing: 2px;
          animation: animateText 2s ease-in-out infinite;
          animation-delay: -1s;
        }
  
        @keyframes animateText {
  
          0%,
          50% {
            color: #050c09;
            text-shadow: none;
          }
  
          50.1%,
          100% {
            color: #0f0;
            text-shadow: 0 0 5px #0f0,
              0 0 15px #0f0;
          }
        }
      </style>
      <section>
        <div class="loading">
          <div class="blocks" style="--i:1;"></div>
          <div class="blocks" style="--i:2;"></div>
          <div class="blocks" style="--i:3;"></div>
          <div class="blocks" style="--i:4;"></div>
          <div class="blocks" style="--i:5;"></div>
          <div class="blocks" style="--i:6;"></div>
          <div class="blocks" style="--i:7;"></div>
          <div class="blocks" style="--i:8;"></div>
          <div class="blocks" style="--i:9;"></div>
          <div class="blocks" style="--i:10;"></div>
          <div class="blocks" style="--i:11;"></div>
          <div class="blocks" style="--i:12;"></div>
          <div class="blocks" style="--i:13;"></div>
          <div class="blocks" style="--i:14;"></div>
          <div class="blocks" style="--i:15;"></div>
          <div class="blocks" style="--i:16;"></div>
          <div class="blocks" style="--i:17;"></div>
          <div class="blocks" style="--i:18;"></div>
          <div class="blocks" style="--i:19;"></div>
          <div class="blocks" style="--i:20;"></div>
          <h3>loading</h3>
        </div>
      </section>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>
